<template>
<!-- 将类名改成动态的，需要多大的就在使用时更改size -->
  <div class="star" :class="'star-'+size">
    <!-- 根据state中的score属性创建成数组进行遍历显示星星 -->
    <span class="star-item" v-for="(sc,index) in StartClass" :key="index" :class="sc"></span>
  </div>
</template>

<script>
export default {
    props:{
        size:Number,
        score:Number
    },
    computed:{
      // 创建一个函数
        StartClass(){
          // 使用解构赋值将score从state中提取出来
            const {score} =this
            // 创建一个空数组用来保存动态的score数据
            const scs=[]
            //使用Math函数的floor属性提取数字的整数  3.5==3
            const scoreFloor=Math.floor(score)
            // for循环，scoreFloor是几，就循环几次在数组中加几个on
            for(let i=0; i<scoreFloor;i++){
                scs.push('on')
            }
            // 判断结果大于5的时候就在数组中加一个half
            if(score*10-scoreFloor*10>=5){
                scs.push('half')
            }
            // 数组的长度如果小于5，就在数组中添加off
            if(scs.length<5){
                scs.push('off')
            }
            // 返回数组
            return scs
        }
    }
};
</script>

<style lang='stylus' ref='stylesheet/stylus'>
 @import "../../common/stylus/mixins.styl"
                          .star //2x图 3x图
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('../../components/StartFile/images/star48_on')
                                &.half
                                  bg-image('../../components/StartFile/images/star48_half')
                                &.off
                                  bg-image('../../components/StartFile/images/star48_off')
                            &.star-36
                              .star-item
                                width 15px
                                height 15px
                                margin-right 6px
                                background-size 15px 15px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('../../components/StartFile/images/star36_on')
                                &.half
                                  bg-image('../../components/StartFile/images/star36_half')
                                &.off
                                  bg-image('../../components/StartFile/images/star36_off')
                            &.star-24
                              .star-item
                                width 10px
                                height 10px
                                margin-right 3px
                                background-size 10px 10px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('../../components/StartFile/images/star24_on')
                                &.half
                                  bg-image('../../components/StartFile/images/star24_half')
                                &.off
                                  bg-image('../../components/StartFile/images/star24_off')
</style>